import {
	LockOutlined,
	MailOutlined,
	MobileOutlined,
	UserOutlined,
} from "@ant-design/icons";
import { Space, message, Tabs } from "antd";
import React, { useState } from "react";
import ProForm, { ProFormCaptcha, ProFormText } from "@ant-design/pro-form";
import { useIntl, connect, FormattedMessage } from "umi";
import { getCaptcha } from "@/services/login";
import type { Dispatch } from "umi";
import type { StateType } from "@/models/login";
import type { LoginParamsType } from "@/services/login";
import type { ConnectState } from "@/models/connect";

import styles from "./index.less";

export type LoginProps = {
	dispatch: Dispatch;
	userLogin: StateType;
	submitting?: boolean;
};

const Login: React.FC<LoginProps> = (props) => {
	const { submitting } = props;
	const [type, setType] = useState<string>("account");
	const intl = useIntl();

	const handleSubmit = (values: any) => {
		const { dispatch } = props;
		if (type === "mobile") {
			values = {
				loginName: values.mobile,
				password: values.captcha,
			};
		}
		dispatch({
			type: "login/login",
			payload: { ...values },
		});
	};
	return (
		<div className={styles.main}>
			<ProForm
				initialValues={{
					autoLogin: true,
				}}
				submitter={{
					render: (_, dom) => dom.pop(),
					submitButtonProps: {
						loading: submitting,
						size: "large",
						style: {
							width: "100%",
						},
					},
				}}
				onFinish={(values) => {
					handleSubmit(values as LoginParamsType);
					return Promise.resolve();
				}}
			>
				<Tabs activeKey={type} onChange={setType}>
					<Tabs.TabPane
						key="account"
						tab={intl.formatMessage({
							id: "pages.login.accountLogin.tab",
							defaultMessage: "账户密码登录",
						})}
					/>
					{/* <Tabs.TabPane
            key="mobile"
            tab={intl.formatMessage({
              id: 'pages.login.phoneLogin.tab',
              defaultMessage: '手机号登录',
            })}
          /> */}
				</Tabs>

				{type === "account" && (
					<>
						<ProFormText
							name="loginName"
							fieldProps={{
								size: "large",
								prefix: <UserOutlined className={styles.prefixIcon} />,
							}}
							placeholder="请输入账号"
							rules={[
								{
									required: true,
									message: (
										<FormattedMessage
											id="pages.login.username.required"
											defaultMessage="请输入账号"
										/>
									),
								},
							]}
						/>
						<ProFormText.Password
							name="password"
							fieldProps={{
								size: "large",
								prefix: <LockOutlined className={styles.prefixIcon} />,
							}}
							placeholder="请输入密码"
							rules={[
								{
									required: true,
									message: (
										<FormattedMessage
											id="pages.login.password.required"
											defaultMessage="请输入密码"
										/>
									),
								},
							]}
						/>
					</>
				)}

				<div
					style={{
						marginBottom: 54,
					}}
				></div>
			</ProForm>
			<Space className={styles.other}></Space>
		</div>
	);
};

export default connect(({ login, loading }: ConnectState) => ({
	userLogin: login,
	submitting: loading.effects["login/login"],
}))(Login);
